﻿    <!DOCTYPE html>    
    <html>
    <head>
        <meta charset="utf-8">    
        <title>ForeHead</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

        <script src="/Public/js/jquery.min.js"></script> 

        <link rel="stylesheet" type="text/css" href="/Public/css/bootstrap.min.css">

        <style type="text/css">
        body{
            background-color: #f4f4f4;
        }
        .container{
            padding: 0 !important;
            width: 100%;
            height: 50px;
        }
        .navbar img{
            margin-top: 10px;
            width: 40%;
            height: 40%;
        }
        .container-btn{
            float: left;
            width: 33.3%;
            height: 100%;
            font-size: 11px;
            font-weight: bold;
            text-align: center;
            line-height: 20px;
            color: #a4a6a8;
        }
        .container-btn-checked{
           /* background: rgb(208, 205, 205);*/
           color:#34d098;
        }
        .media{
           background-color: white;
           height: 91px;
           margin-top: 5px !important;
        }
        .media-left{
            /*padding: 13px 10px 0 10px;*/
            min-width: 80px !important;
            height: 100%;
            overflow: hidden;
            /*border-right: 1px solid #A4A6A8;*/
        }
        .media-name{
            text-align: center;
            padding-top: 4px;
            font-size: 12px;
            color: #8d949a;
            font-weight: bolder;
        }
        .media-left-text{
            margin: 13px 0 0 10px;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 1px solid gray;
            /*background-color: yellow;*/
            background-image: url(img/raodaqi.jpg);
            background-size: 100% 100%;

            text-align: center;
            line-height: 50px;
            /*margin: 10px 0 0 5px;*/
            font-weight: bolder;
        }
        .reward-job{
            display: block;
            /*width: 140px;*/
            width: 100%;
            height: 22px;
            font-weight: bolder;
            margin: 8px 0 4px 5px;
            float: left;
            font-size: 16px;
            overflow: hidden;
        }
        .reward-money{
            position: absolute;
            right: 0px;
            z-index: 2;
            font-weight: bolder;
            margin: 32px 15px 0 0;

            float: right;
            color: #f67865;
            overflow: hidden;
        }
        .reward-money-big{
            float: right;
            font-size: 17px;
            margin-left: 7px;

        }
        .reward-money-small{
            float: left;

        }
        .find{
            padding: 0;
            padding-right: 2px;
            margin: 0;
            width: 20px !important;
            height: 20px !important;
        }
        .time{
            display: block;
            width: 100%;
            height: 17px;
            margin: 6px 0;
            overflow: hidden; 
        }
        .time span{
           /* display: block;
            width: 80px;*/
        }
        .company{
            width: 100%;
        }

        .media-body{
            font-size: 12px;
        }
        .media-body img{
            padding-right: 4px;
             width: 16px;
             height: 16px;
        }
        .media-icon{
             color: #a4a6a8;
             font-size: 12px;

        }
        .reward-icon{
            width: 22px !important;
            height: 22px !important;
            overflow: hidden;
        }
        a:focus,a:hover,a:active,a:visited{
            text-decoration: none !important;
            color: inherit;
        }
        .line{
            position: absolute;
            display: inline-block;
            border: 1px solid #A4A6A8;
            width: 100px;
            top: 25px;
            z-index: -1;
            -webkit-transform: translate(-50%);
            -ms-transform: translate(-50%);
            transform: translate(-50%);
        }
        .container-top{
            width: 100%;
            font-size: 12px;
            color: #A4A6A8;
            text-align: center;
            line-height: 50px;
        }
        .public-text{
            position: absolute;
            left: 12%;
        }
        .advanced-text{
            /*margin:0 80px;*/
            position: absolute;
            right: 9%;
        }
        .content{
            margin-top: 50px;
            /*margin-bottom: 50px !important;*/
            padding-bottom: 55px !important;
        }
        .container-choose{
            position: absolute;
            display: inline-block;
            width: 20px;
            height: 20px;
            background-image: url("/Public/img/筛选.svg");
            background-size: 100% 100%;
            top: 16px;
            -webkit-transform: translate(-55px);
            -ms-transform: translate(-55px);
            transform: translate(-55px);
        }
        .advanced-choose{
            position: absolute;
            display: inline-block;
            width: 20px;
            height: 20px;
            background-image: url("/Public/img/筛选.svg");
            background-size: 100% 100%;
            top: 16px;
            -webkit-transform: translate(45px);
            -ms-transform: translate(45px);
            transform: translate(45px);
        }
        .container-people{
            position: absolute;
            left: 50%;
            width: 40px;
            height: 40px;
            background-image: url("/Public/img/人民荐才 .svg");
            background-size: 100% 100%;
            top:6px;
            -webkit-transform: translate(-65px);
            -ms-transform: translate(-65px);
            transform: translate(-65px);

            /*animation: move 5s infinite ease-in !important;
            -webkit-animation:move 5s infinite ease-in;
            -o-animation:move 5s infinite ease-in;*/

            z-index: 2;
        }
        .advanced-people{
            position: absolute;
            left: 50%;
            width: 40px;
            height: 40px;
            background-image: url("/Public/img/高级荐才.svg");
            background-size: 100% 100%;
            top:6px;
            -webkit-transform: translate(-65px);
            -ms-transform: translate(-65px);
            transform: translate(-65px);
            /*animation: move 1s;*/
            z-index: 3;
        }

        @keyframes moveback
        {
            0%  { transform: translate(35px);}
            25% { transform: translate(10px);}
            50% { transform: translate(-15px);}
            75% { transform: translate(-40px);}
            100% {transform: translate(-65px);}
        }
        @-webkit-keyframes earthRotate
        {
             0%  { transform: translate(35px);}
            25% { transform: translate(10px);}
            50% { transform: translate(-15px);}
            75% { transform: translate(-40px);}
            100% {transform: translate(-65px);}
        }
        @-o-keyframes earthRotate
        {
             0%  { transform: translate(-65px);}
            25% { transform: translate(-40px);}
            50% { transform: translate(-15px);}
            75% { transform: translate(10px);}
            100% {transform: translate(35px);}
        }

       /* @keyframes move
        {
            0%  { transform: translate(35px);}
            25% { transform: translate(10px);}
            50% { transform: translate(-15px);}
            75% { transform: translate(-40px);}
            100% {transform: translate(-65px);}
        }
        @-webkit-keyframes earthRotate
        {
            0%  { transform: translate(35px);}
            25% { transform: translate(10px);}
            50% { transform: translate(-15px);}
            75% { transform: translate(-40px);}
            100% {transform: translate(-65px);}
        }
        @-o-keyframes earthRotate
        {
             0%  { transform: translate(35px);}
            25% { transform: translate(10px);}
            50% { transform: translate(-15px);}
            75% { transform: translate(-40px);}
            100% {transform: translate(-65px);}
        }*/
         @keyframes move
        {
            form { transform: translate(-65px);}
            to { transform: translate(30px);}
        }
        @-webkit-keyframes earthRotate
        {
            form { transform: translate(-65px);}
            to { transform: translate(30px);}
        }
        @-o-keyframes earthRotate
        {
            form { transform: translate(-65px);}
            to { transform: translate(30px);}
        }
        </style>
    </head>
    <body>

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container container-top">
            <div class="public-text">大众荐才</div>
            <div  class="container-choose public"></div>

            <div  class="container-people "></div>

            <div class="line"></div>
            <div style="display:none" src="Public/img/高级荐才.svg" class="advanced-people"></div>
            <!-- <img style="display:none" src="Public/img/高级荐才.svg" class="advanced-people"> -->
            <div class="advanced-choose advanced"></div>
            <div class="advanced-text">高级荐才</div>
        </div>
    </nav>
    <div class="content">
        
    <div id="list1">
    <volist name="list1" id="job1">
        <a href="recommendDetail/jobId/{$job1['id']}">
            <div class="media" id="">
                <div class="media-left">
                    <!-- <div class="media-left-text"> -->
                         <!-- 赏 {$job['headimgurl']} -->
                    <!-- </div> -->
                    <img class="media-left-text"  src="{$job1['headimgurl']}">
                    <div class="media-name">{$job1['name']}</div>
                </div>
                <div class="media-body">
                    <div class="reward-job"><img class="find" src="/Public/img/find.svg">{$job1['jobName']}</div>
                    <div class="reward-money">
                        <!-- <div class="reward-money-small">赏金</div> -->
                        <div class="reward-money-small"><img class="reward-icon" src="/Public/img/赏金.svg"></div>
                        <div class="reward-money-big">{$job1['rewardMoney']}</div>
                    </div>
                    <div class="media-icon">
                        <div class="time">
                           <img class="time-icon" src="/Public/img/发布时间.svg">{$job1['cTime']|date='H:i',###}
                        </div>

                        <img class="" src="/Public/img/工作地点.svg">{$job1['jobPlace']}

                        <img class="" src="/Public/img/公司.svg">{$job1['company']}
                        
                    </div>
                </div>
            </div>
        </a>
    </volist>
    </div>

    <div id="list2" style="display:none">
        <volist name="list2" id="job2" >
            <a href="recommendDetail/jobId/{$job2['id']}">
                <div class="media" id="">
                    <div class="media-left">
                        <!-- <div class="media-left-text"> -->
                             <!-- 赏 {$job['headimgurl']} -->
                        <!-- </div> -->
                        <img class="media-left-text"  src="{$job2['headimgurl']}">
                        <div class="media-name">{$job2['name']}</div>
                    </div>
                    <div class="media-body">
                        <div class="reward-job"><img class="find" src="/Public/img/find.svg">{$job2['jobName']}</div>
                        <div class="reward-money">
                            <!-- <div class="reward-money-small">赏金</div> -->
                            <div class="reward-money-small"><img class="reward-icon" src="/Public/img/赏金.svg"></div>
                            <div class="reward-money-big">{$job2['rewardMoney']}</div>
                        </div>
                        <div class="media-icon">
                            <div class="time">
                               <img class="time-icon" src="/Public/img/发布时间.svg">{$job2['cTime']|date='H:i',###}
                            </div>

                            <img class="" src="/Public/img/工作地点.svg">{$job2['jobPlace']}

                            <img class="" src="/Public/img/公司.svg">{$job2['company']}
                            
                        </div>
                    </div>
                </div>
            </a>
        </volist>
    </div>
</div>

    
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div class="container">
                <div class="container-btn container-btn-checked" data-navbar = "index">
                    <img src="/Public/img/我要推荐（导航栏）.svg">
                    <div>我要推荐</div>
                </div>
                <div class="container-btn" data-navbar = "usePeople">
                    <img src="/Public/img/我要用人.svg">
                    <div>我要用人</div>
                </div>
                <div class="container-btn" data-navbar = "user">
                    <img src="/Public/img/个人中心.svg">
                    <div>个人中心</div>
                </div>
            </div>
        </nav>

    </body>
    <script type="text/javascript">

        var left = true; 

        // $(".media").on("click",function(){
        //     window.location.href = "recommendDetail.html";
        // })

        $(".container-btn").on("click",function(){
            window.location.href = "/addon/JianCai/JianCai/"+$(this).data('navbar')+".html";
        })
        $(".advanced,.advanced-text").on("click",function(){
                $("#list1").hide();
                $("#list2").show();

                if(left)
                {
                    i = -65;
                    timer = setInterval(function(){
                        i= i + 10;
                        $(".container-people").css({
                            "transform":"translate("+i+"px)"
                        });
                        $(".advanced-people").css({
                            "transform":"translate("+i+"px)"
                        });
                        if(i == 35){
                            clearInterval(timer);
                        }
                        if(i == -5){
                            $(".container-people").hide();
                            $(".advanced-people").show();
                        }
                        }, 20);
                    left = false;
                }
        })

        $(".public,.public-text").on("click",function(){
                $("#list2").hide();
                $("#list1").show();

                if(!left)
                {
                    i = 35;
                    timer = setInterval(function(){
                        i= i - 10;
                        $(".container-people").css({
                            "transform":"translate("+i+"px)"
                        });
                        $(".advanced-people").css({
                            "transform":"translate("+i+"px)"
                        });
                        if(i == -65){
                            clearInterval(timer);
                        }
                        if(i == -5){
                            $(".container-people").show();
                            $(".advanced-people").hide();
                        }
                        }, 20);
                    left = true;
                }
        })

        function fmoney(s, n) //s:传入的float数字 ，n:希望返回小数点几位 
        { 
            n = n > 0 && n <= 20 ? n : 2; 
            s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + ""; 
            var l = s.split(".")[0].split("").reverse(), 
            r = s.split(".")[1]; 
            t = ""; 
            for(i = 0; i < l.length; i ++ ) 
            { 
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : ""); 
            } 
            // return t.split("").reverse().join("") + "." + r;
            return t.split("").reverse().join(""); 
        }
       
        $(".reward-money-big").each(function(){
             rewardMoney = fmoney($(this).text(),0);
            $(this).text("¥ "+rewardMoney);
        }); 
        //rewardMoney = fmoney($(".reward-money-big").text(), 0);
        //alert(rewardMoney);
        //$(".reward-money-big").text("¥ "+rewardMoney); 
    </script>
    </html>
